<template>
  <div class="box">
    <div class="table">
      <div class="top">
        <div>
          <input type="text" placeholder="请输入名字" v-model="val" />
        </div>
        <div class="top_item">
          <el-button type="primary" @click="sou">查询</el-button>
          <el-button type="primary" @click="add">新增安防人员</el-button>
          <el-button type="primary" @click="alldel">批量删除</el-button>
        </div>
      </div>
      <div class="biao">
        <el-table :data="FenTable" style="width: 100%" @selection-change="allselect">
          <el-table-column type="selection" width="55" />
          <el-table-column property="stuNo" label="ID" width="250" />
          <el-table-column property="stuName" label="值班人员" width="250" show-overflow-tooltip />
          <el-table-column property="image" label="监控实时图" width="250">
            <template #default="scope">
              <el-image :src="scope.row.image" style="width: 80px; height: 80px" />
            </template>
          </el-table-column>
          <el-table-column property="bourn" label="监控分布位置" width="250" />
          <el-table-column property="switch" label="门禁情况">
            <template #default="scope">
              <el-switch v-model="scope.row.type" />
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="primary" size="small">查看</el-button>
              <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                编辑
              </el-button>
              <el-popconfirm
                title="你确定要删除这个嘛?"
                confirm-button-text="确定"
                cancel-button-text="取消"
                @confirm="confirmEvent(scope.$index, scope.row)"
                @cancel="cancelEvent"
              >
                <template #reference>
                  <el-button>删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 新增 -->
      <el-dialog v-model="dialogFormVisible" :title="flag ? '新增' : '编辑'" width="500">
        <el-form :model="form">
          <el-form-item label="ID" :label-width="formLabelWidth" v-if="flag == false">
            <el-input
              v-model="form.stuNo"
              autocomplete="off"
              placeholder="请输入检测人员"
              :disabled="flag == false"
            />
          </el-form-item>
          <el-form-item label="检测人员" :label-width="formLabelWidth">
            <el-input v-model="form.stuName" autocomplete="off" placeholder="请输入检测人员" />
          </el-form-item>
          <el-form-item label="检测实时图" :label-width="formLabelWidth">
            <el-input v-model="form.image" autocomplete="off" placeholder="请输入图片路径" />
          </el-form-item>
          <el-form-item label="检测区域" :label-width="formLabelWidth">
            <el-input v-model="form.bourn" autocomplete="off" placeholder="请输入检测区域" />
          </el-form-item>
          <el-form-item label="环境监测状态" :label-width="formLabelWidth">
            <el-switch v-model="form.type" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="submit"> 确认 </el-button>
          </div>
        </template>
      </el-dialog>
      <!-- 分页 -->
      <div class="fen">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="protectdata.length"
          :page-size="pageSize"
          :current-page="currentPage"
          @current-change="huan"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, ElTable } from 'element-plus'
import { computed, onMounted, reactive, ref } from 'vue'
import { getsoueuipment } from '../../request/index'
import { geteuipment, deleuipment, addeuipment, editeuipment } from '../../request/index'
//搜索框
const val = ref('')
//多选的stuNo
const selectdata = ref()
//新增表单
const form = reactive({
  stuNo: '',
  stuName: '',
  image: '',
  bourn: '',
  type: false
})
//
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
//是否新增还是编辑
const flag = ref(true)
//当前页
const currentPage = ref(1)
const pageSize = ref(5)
//表格
const protectdata = ref([])
//计算分页属性
const FenTable = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return protectdata.value.slice(start, end)
})
//切换分页
const huan = (page: number) => {
  currentPage.value = page
}
const init = () => {
  geteuipment().then((res) => {
    console.log(res, '安防管理')
    protectdata.value = res.data.data
  })
}
//加载
onMounted(() => {
  init()
})

interface User {
  stuNo: number
  stuName: string
  image: string
  bourn: string
  type: boolean
}
//新增
const add = () => {
  flag.value = true
  dialogFormVisible.value = true
  form.stuNo = ''
  form.stuName = ''
  form.image = ''
  form.bourn = ''
  form.type = false
}
//编辑
const handleEdit = (index: number, row: any) => {
  dialogFormVisible.value = true
  flag.value = false
  form.stuNo = row.stuNo
  form.stuName = row.stuName
  form.image = row.image
  form.bourn = row.bourn
  form.type = row.type
  // console.log(index, row)
}
//删除
const confirmEvent = (index: number, row: User) => {
  // console.log(index, row)
  let stuNo = row.stuNo

  deleuipment(stuNo).then((res) => {
    // console.log(res, '删除信息')
    ElMessage.success('删除成功')
    init()
  })
}
//提交
const submit = () => {
  const { stuName, image, bourn, type } = form
  if (flag.value) {
    addeuipment({ stuName, image, bourn, type }).then((res) => {
      // console.log(res, '新增信息')
      if (res.data.code == 200) {
        ElMessage.success('新增成功')
        init()
      }
    })
  } else {
    editeuipment(form).then((res) => {
      // console.log(res, '编辑信息')
      if (res.data.code == 200) {
        ElMessage.success('编辑成功')
        init()
      }
    })
  }
  dialogFormVisible.value = false
}
//取消
const cancelEvent = () => {
  ElMessage.error('取消删除')
}
//
const cancel = () => {
  dialogFormVisible.value = false
}
//多选
const allselect = (val: any) => {
  let ids = val.map((item: User, index: number) => {
    return item.stuNo
  })
  // console.log(ids)
  selectdata.value = ids
  // console.log(selectdata.value)
  //调用删除接口
}
//
const alldel = () => {
  //调用删除接口
  let ids = selectdata.value
  deleuipment(ids)
    .then((res) => {
      // console.log(res)

      if (res.data.code == 200) {
        ElMessage.success('删除成功')
        init()
      }
    })
    .catch((err) => {
      ElMessage.error('删除成功')
    })
}
//搜索
const sou = () => {
  getsoueuipment(val.value)
    .then((res) => {
      if (res.data.code == 200) {
        console.log(res, '搜索数据')
        ElMessage.success('搜索成功')
        protectdata.value = res.data.data
        val.value = ''
      } else {
        ElMessage.error('搜索失败')
      }
    })
    .catch(() => {
      ElMessage.error('搜索失败')
    })
}
</script>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;
  background: #f0f2f5;
  padding-top: 20px;
}
.table {
  background: #fff;
  margin-left: 20px;
  margin-right: 20px;
  height: 700px;
}
.fen {
  background: #fff;
  height: 100px;
  display: flex;
  align-items: center;
}
.top {
  height: 100px;
  border-bottom: 1px solid #ccc;
}
.top_item {
  height: 50px;
  display: flex;
  align-items: center;
}
</style>